import {HomeAPI} from 'api';
import {DataList} from 'components/List';
import {SimpleTable} from 'components/Table';

import {Card} from 'components/View/Card';
import React, {FC} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {STYLE_COLOR} from 'variables';

export interface PolicyHistoryTableData {
  title: string;
  body: Array<{
    old: string;
    new?: string;
    is_rise?: boolean; // 颜色标志：true绿，false红，null无
  }>[];
}

const TemTable: FC<PolicyHistoryTableData> = ({title, body}) => {
  return (
    <SimpleTable
      rowBorder
      listData={{
        header: {
          title: title,
        },
        body: body,
      }}
      renderItem={cell => (
        <View style={styles.cell}>
          <Text style={styles.cellText}>{cell.old}</Text>
        </View>
      )}
    />
  );
};

const TeamPage: React.ComponentType<any> = ({navigation}) => {
  return (
    <DataList
      api={HomeAPI.fetchPolicyAdjustmentHistory}
      type={'offset'}
      renderItem={({item}) => {
        const {time, policies} = item;
        return (
          <View style={styles.item}>
            <Text style={styles.time}>{time}</Text>
            <Card
              containerStyle={{
                marginHorizontal: 0,
                marginTop: 12,
                marginBottom: 0,
                padding: 12,
              }}>
              {policies.map((policy, i) => (
                <View key={i} style={{marginTop: i > 0 ? 8 : 0}}>
                  <TemTable {...policy} />
                </View>
              ))}
            </Card>
          </View>
        );
      }}
      ListHeaderComponent={<Text style={styles.title}>政策调整</Text>}
    />
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: 18,
    lineHeight: 25,
    alignSelf: 'center',
    marginTop: 12,
  },
  item: {
    marginTop: 12,
  },
  time: {
    textAlign: 'center',
    color: STYLE_COLOR.TEXT_GREY,
    fontSize: 13,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  arrow: {
    fontSize: 16,
    marginHorizontal: 4,
  },
  cell: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  cellText: {
    color: STYLE_COLOR.TEXT_MAIN,
    fontSize: 12,
  },
  switchText: {
    color: STYLE_COLOR.TEXT_MAIN,
    fontSize: 13,
    textDecorationLine: 'underline',
  },
});

export default TeamPage;
